<template>
	<view>
		<!-- 轮播图区域 -->
		<swiper class="banner-swiper" style="background-color: #333;" circular autoplay interval="3000" duration="500"
			:indicator-dots="true" indicator-active-color="#ffffff">
			<swiper-item v-for="(item, index) in bannerList" :key="index" @click="handleBannerClick(item)">
				<image :src="item.bannerfile.url" mode="aspectFit" class="banner-image"></image>
			</swiper-item>
		</swiper>
		<!-- 免责公告弹窗 -->
		<view class="notice-btn-container">
			<text class="popup-but" @tap="showNotice(this.noticeList.popupType)">{{ this.noticeList.popupTitle }}</text>
			<!-- 弹窗组件 -->
			<notice-popup :visible="noticeList.popupIsShow" :title="noticeList.popupTitle"
				:content="noticeList.popupContent" :type="noticeList.popupType" @close="closePopup"
				@confirm="closePopup" />
		</view>

		<!-- 免责公告弹窗 -->
		<view class="notice-btn-container">
			<text class="notice-btn" :data-content="popupData.popupTitle + '点击查看'"
				@tap="showNotice(this.popupData.popupType)"></text>
			<!-- 弹窗组件 -->
			<notice-popup :visible="popupData.popupIsShow" :title="popupData.popupTitle"
				:content="popupData.popupContent" :type="popupData.popupType" @close="closePopup"
				@confirm="closePopup" />
		</view>
		<!-- 多标签面板 -->
		<Tabpanel_table></Tabpanel_table>
	
	</view>
</template>

<script>
import NoticePopup from '@/components/notice-popup/notice-popup.vue'
import CardGrid_Three from '@/components/CardGrid_Three.vue'
import Tabpanel_table from '@/components/Tabpanel_table.vue'
import Tabpanel from '@/components/Tabpanel.vue'



export default {
	components: {
		CardGrid_Three,
		Tabpanel,
		Tabpanel_table
	},
	data() {

		return {
			//轮播图变量
			bannerList: [],
			// 赛鸽数据
			statisticsData: [],
			// 搜索过滤后的数组
			filteredData: [],
			searchText: '',
			//滚动字幕
			noticeList: {
				popupVisible: false,
				popupType: 'important',
				createTime: '2024-04-01 00:00:00',
				updateTime: '2024-04-01 00:00:00',
				popupTitle: '重要公告',
				popupContent: '2024春季赛鸽大赛报名开始啦！',
				popupIsShow: false
			},

			//弹窗变量
			popupData: {
				popupVisible: false,
				popupType: 'important',
				createTime: '2024-04-01 00:00:00',
				updateTime: '2024-04-01 00:00:00',
				popupTitle: '重要公告',
				popupContent: '2024春季赛鸽大赛报名开始啦！',
				popupIsShow: false
			}
		}
	},
	onLoad() {
		// 页面加载时获取赛鸽数据
		//this.getSaigeData()
		// 页面显示时刷新数据
		this.refreshData()
		//延时获取公告数据
		setTimeout(() => {
			const processItem = (item, target) => {
				this[target] = {
					popupVisible: item.popupIsShow,
					popupType: item.popupType,
					createTime: item.createTime,
					updateTime: item.updateTime,
					popupTitle: item.popupTitle,
					popupContent: item.popupContent,
					popupIsShow: item.popupIsShow
				};
			};

			this.DisclaimersResList
				.filter(item => item.popupType === '系统公告')
				.forEach(item => processItem(item, 'popupData'));

			this.DisclaimersResList
				.filter(item => item.popupType === '免责公告')
				.forEach(item => processItem(item, 'noticeList'));
			console.log(this.noticeList)
			console.log(this.popupData)
		}, 5000);
	},
	onShow() {


	},
	created() {
		this.filteredData = [...this.statisticsData];

	},
	onPullDownRefresh() {
		// 下拉刷新
		this.refreshData().then(() => {
			uni.stopPullDownRefresh()
		})
	},
	methods: {

		//弹窗公告打开事件
		showNotice(type) {
			if (type === this.noticeList.popupType) {
				this.noticeList.popupType = type;
				this.noticeList.popupTitle = this.noticeList.popupTitle;
				this.noticeList.popupIsShow = true;
			} else if (type === this.popupData.popupType) {
				this.popupData.popupType = type;
				this.popupData.popupTitle = this.popupData.popupTitle;
				this.popupData.popupIsShow = true;
			}

		},
		//弹窗公告关闭事件
		closePopup() {
			this.popupData.popupIsShow = false;
			this.noticeList.popupIsShow = false;
		},

		//搜索statisticsData源数据
		filterData() {
			if (!this.searchText) {
				this.filteredData = this.statisticsData;
				return;
			}
			this.filteredData = this.statisticsData.filter(item =>
				item.designated_person.includes(this.searchText)
			);
		},



		//页面初始化加载数据 
		async initData() {
			try {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				//获取轮播图数据
				// 检查本地缓存中是否有轮播图数据
				const cachedBanners = uni.getStorageSync('cachedBanners');
				const bannersCacheTime = uni.getStorageSync('bannersCacheTime');
				const now = Date.now();
				// 如果缓存存在且未过期(1小时)
				if (cachedBanners && bannersCacheTime && (now - bannersCacheTime < 3600000)) {
					this.bannerList = cachedBanners;
					console.log('使用缓存的轮播图数据');
				} else {
					// 无缓存或已过期，调用云函数获取数据
					const bannerRes = await uniCloud.callFunction({
						name: 'getBanners',
						data: {
							action: 'client'
						}
					});
					if (bannerRes.result.code === 0) {
						this.bannerList = bannerRes.result.data;
						// 缓存数据
						uni.setStorageSync('cachedBanners', this.bannerList);
						uni.setStorageSync('bannersCacheTime', now);
						console.log('获取并缓存轮播图数据');
					} else {
						throw new Error(bannerRes.result.msg);
					}
				}

				// 获取系统公告数据
				// const noticeRes = await uniCloud.callFunction({
				// 	name: 'getPopupConfig'
				// });
				// if (noticeRes.result.code === 0 && noticeRes.result.data) {
				// 	this.noticeList = noticeRes.result.data.map(item => ({

				// 		article_status: item.article_status,
				// 		content: item.content
				// 	}));
				// }

				// 获取免责公告数据
				// 检查本地缓存中是否有免责声明数据
				const cachedDisclaimers = uni.getStorageSync('cachedDisclaimers');
				const disclaimersCacheTime = uni.getStorageSync('disclaimersCacheTime');
				const disclaimersNow = Date.now();
				// 如果缓存存在且未过期(1小时)
				if (cachedDisclaimers && disclaimersCacheTime && (disclaimersNow - disclaimersCacheTime < 3600000)) {
					this.DisclaimersResList = cachedDisclaimers;
					console.log('使用缓存的免责声明数据');
				} else {
					// 无缓存或已过期，调用云函数获取数据
					const DisclaimersRes = await uniCloud.callFunction({
						name: 'get_Disclaimers'
					});
					if (DisclaimersRes.result.code === 0 && DisclaimersRes.result.data) {
						this.DisclaimersResList = DisclaimersRes.result.data.map(item => ({
							popupVisible: item.popupVisible,
							popupType: item.popupType,
							createTime: item.createTime,
							updateTime: item.updateTime,
							popupTitle: item.popupTitle,
							popupContent: item.popupContent,
							popupIsShow: item.popupIsShow,
						}));
						// 缓存数据
						uni.setStorageSync('cachedDisclaimers', this.DisclaimersResList);
						uni.setStorageSync('disclaimersCacheTime', now);
						console.log('获取并缓存免责声明数据');
					}
				}
			} catch (e) {
				uni.showToast({
					title: '加载失败：' + e.message,
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},

		// TODO: 刷新数据
		async refreshData() {
			try {
				await this.initData()
			} catch (e) {
				console.error('刷新数据失败:', e)
			}
		},
		//轮播图点击跳转
		handleBannerClick(banner) {
			if (banner.url) {
				uni.navigateTo({
					url: banner.url
				})
			}
		},
		//公告点击跳转
		handleNoticeClick(notice) {
			uni.navigateTo({
				url: `/pages/notice/detail?id=${notice.id}`
			})
		},

		handleQuickNav(nav) {
			uni.navigateTo({
				url: nav.url
			})
		},
		handleCompetitionClick(competition) {
			uni.navigateTo({
				url: `/pages/competition/detail?id=${competition.id}`
			})
		},
		handlePigeonClick(pigeon) {
			uni.navigateTo({
				url: `/pages/pigeon/detail?id=${pigeon.id}`
			})
		},
		navigateTo(url) {
			uni.navigateTo({
				url
			})
		}
	}
}
</script>

<style lang="scss">
.block-icon {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	opacity: 1;
}

.container {
	min-height: 100vh;
	background: #f5f7fa;
	padding-bottom: env(safe-area-inset-bottom);
}

.banner-swiper {
	margin: 0 15px;
	border-radius: 8px;
	overflow: hidden;
	height: 360rpx;
	position: relative;
	background: #fff;

	.banner-image {
		width: 100%;
		height: 100%;
	}

	:deep(.uni-swiper-dots-horizontal) {
		bottom: 20rpx;
	}
}

.notice-bar {
	margin: 20rpx 30rpx;
	height: 72rpx;
	background: #fff;
	border-radius: 36rpx;
	display: flex;
	align-items: center;
	padding: 0 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.notice-btn-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20rpx;
}

.notice-btn {
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	border-radius: 8rpx;
	background: linear-gradient(to right, #c80404, #fd0505);
	color: white;
	font-size: 38rpx;
	font-weight: bold;
	position: relative;
	overflow: hidden;
	animation: colorChange 2s infinite alternate;
}

.popup-but {
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	border-radius: 10rpx;
	background: linear-gradient(to right, #3100ac, #0027e8);
	color: white;
	font-size: 32rpx;
	font-weight: bold;
	position: relative;
	overflow: hidden;
	animation: colorChange 2s infinite alternate;
}

.notice-btn::after {
	content: attr(data-content);
	position: absolute;
	top: 0;
	left: 0;
	width: 80%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: textScroll 10s linear infinite;
}

@keyframes colorChange {
	from {
		color: white;
	}

	to {
		color: yellow;
	}
}

@keyframes textScroll {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(-100%);
	}
}

.notice-icon {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16rpx;

	.iconfont {
		color: #f59e0b;
		font-size: 32rpx;
	}
}

.notice-swiper {
	flex: 1;
	height: 72rpx;

	.notice-item {
		line-height: 72rpx;
		font-size: 32rpx;
		color: #1f2937;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.quick-nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
	margin: 20rpx 30rpx;
	padding: 24rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.nav-icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 12rpx;

			.iconfont {
				color: #fff;
				font-size: 48rpx;
			}
		}

		.nav-text {
			font-size: 24rpx;
			color: #4b5563;
		}
	}
}

.section-card {
	margin: 20rpx 30rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #1f2937;
		}

		.more-link {
			font-size: 24rpx;
			color: #6b7280;
		}
	}
}

.competition-list {
	.competition-item {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 2rpx solid rgba(226, 232, 240, 0.6);

		&:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}

		.comp-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			margin-right: 16rpx;
		}

		.comp-info {
			flex: 1;

			.comp-name {
				font-size: 28rpx;
				color: #1f2937;
				margin-bottom: 8rpx;
			}

			.comp-meta {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.comp-time {
					font-size: 24rpx;
					color: #6b7280;
				}

				.comp-status {
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
					font-size: 22rpx;

					&.upcoming {
						background: rgba(96, 165, 250, 0.1);
						color: #3b82f6;
					}

					&.ongoing {
						background: rgba(34, 197, 94, 0.1);
						color: #22c55e;
					}

					&.completed {
						background: rgba(107, 114, 128, 0.1);
						color: #6b7280;
					}
				}
			}
		}
	}
}

.pigeon-scroll {
	white-space: nowrap;

	.pigeon-list {
		display: inline-flex;
		padding: 10rpx 0;

		.pigeon-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 30rpx;

			&:last-child {
				margin-right: 0;
			}

			.pigeon-image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 16rpx;
				margin-bottom: 12rpx;
			}

			.pigeon-name {
				font-size: 26rpx;
				color: #1f2937;
				margin-bottom: 4rpx;
			}

			.pigeon-achievement {
				font-size: 22rpx;
				color: #6b7280;
			}
		}
	}
}

// 添加骨架屏样式
@keyframes skeleton-loading {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

.skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
	background-size: 400% 100%;
	animation: skeleton-loading 1.4s ease infinite;
}

.double-owner {
	position: relative;
	padding: 4px 6px;
}



.header {
	position: relative;
	height: 150rpx;
	width: 100%;
	overflow: hidden;
	background: linear-gradient(15deg, #ffaa00, #ff0000);
	/* 修改为45度红黄渐变 */
	border-radius: 10rpx;
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

}

.header-image {
	width: 100%;
	height: 100%;
	filter: brightness(0.9);
}

.header-text {
	position: absolute;
	bottom: 30rpx;
	left: 30rpx;
	color: #ffffff;
}

.header-title {
	font-size: 50rpx;
	font-weight: bold;
}

.header-subtitle {
	font-size: 30rpx;
	margin-top: 10rpx;
}

.carousel {
	height: 400rpx;
	width: 100%;
	margin-top: 30rpx;
	border-radius: 10rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.carousel image {
	width: 100%;
	height: 100%;
}

/* 修改：系统公告改为圆角面板，添加小喇叭图标样式 */
.announcement-panel {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #fffae8;
	padding: 10rpx;
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	color: red;
	margin-top: 30rpx;
	border-radius: 10rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.announcement-icon {
	width: 60rpx;
	height: 60rpx;
	margin-left: 20rpx;
	margin-right: 10rpx;
}

.announcement-icon image {
	width: 100%;
	height: 100%;
}

.announcement-panel marquee {
	padding: 0 20rpx;
	flex: 1;
}

/* 修改功能区域样式 */
.function-area {
	display: flex;
	justify-content: space-around;
	width: 100%;
	/* 确保功能区宽度与父容器一致 */
	margin-top: 20rpx;
	padding: 10rpx 0;
	background: linear-gradient(15deg, #ffaa00, #ff0000);
	/* 修改为45度红黄渐变 */
	border-radius: 10rpx;
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.function-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	/* 每个功能块均匀分布 */
	padding: 20rpx;
	margin: 0 10rpx;
	/* 添加左右间距，确保对齐 */
	border-radius: 10rpx;
	background-color: #f5f5f5;
	transition: transform 0.2s, box-shadow 0.2s;
	cursor: pointer;
}

.function-block:active {
	transform: translateY(-5px);
	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
}

.function-icon {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 10rpx;
	border-radius: 50%;
	/* 修改为圆形遮罩 */
	background-color: #ffaa00;
	padding: 10rpx;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	object-fit: cover;
	/* 确保图片内容在圆形内居中显示 */
}

.function-title {
	font-size: 28rpx;
	color: #0000ff;
}

/* 新增标题区域样式 */
.statistics-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 12px;
	margin-bottom: 8rpx;
	padding: 15px 15px;
	background: linear-gradient(to right, #014ed2, #43bdff);

	/* 蓝色渐变 */
	border-radius: 8px;
	color: white;
	font-weight: 600;
}

.title-block {
	display: flex;
	align-items: center;
}

/* 修改表格统计样式，保持与上方区域等宽 */
.statistics {
	margin: 0 12px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}



.statistics table {
	width: auto;
	min-width: 100%;
	border-collapse: collapse;
}

.statistics th,
.statistics td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;

	border-collapse: collapse;
}

.statistics th,
.statistics td {
	padding: 12px 8px;
	text-align: center;
	border: 1px solid #e8e8e8;
}

.statistics th {
	background-color: #05a447;
	color: white;
	font-weight: 600;
	padding: 12px 8px;
	text-align: center;
	position: sticky;
	top: 0;
	z-index: 1;
}

.statistics th,
.statistics td {
	font-size: 14px;
	color: #333;
}

.statistics th {
	font-weight: 600;
	color: #ffffff;
}

.statistics tr:nth-child(even) {
	background-color: #fafafa;

	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}

.normal-table {
	border: 1px solid #ddd;
	white-space: nowrap;
	overflow-x: auto;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 200px);
}

.normal-table th,
.normal-table td {
	border: 1px solid #ddd;
	padding: 8px;
	white-space: nowrap;
}

.normal-table tbody {
	flex: 1;
	overflow-y: auto;
}

.search-container {
	padding-left: 30rpx;
	padding-right: 30rpx;
	background-color: #f8f8f8;
}

.search-input {
	position: relative;
	background-color: #fff;
	border-radius: 40rpx;
	padding: 10rpx 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.search-input input {
	width: 100%;
	height: 50rpx;
	padding-right: 60rpx;
}

.search-icon {

	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
}
</style>